<!-- 主页 -->
<script setup lang="ts">
import { fetchGeneralDataAPI } from '@/apis/fetchGeneralData'
import { useGeneralDataStore } from '@/store/generalData'
import { useUserInfoStore } from '@/store/userInfo'
import { withDomain } from '@/utils/withDomain'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const generalDataStore = useGeneralDataStore()

/**
 * 进入首页时加载首页内容
 * 一般来说，会在 App launch 时加载一次
 * 但在未登录的情况下，没有token
 * 所以只有登录成功跳转至这个页面的时候，才可以成功获取到
 */
onLoad(async () => {
  if (userInfoStore.userInfo?.token) {
    try {
      const res = await fetchGeneralDataAPI()
      if (res.data?.code === 1)
        generalDataStore.setGeneralData(res.data.data)
      else
        uni.showToast({ title: res.data?.msg, icon: 'none' })
    }
    catch (err) {
      uni.showToast({ title: JSON.stringify(err), icon: 'none' })
    }
  }
  else {
    uni.showToast({ title: '获取数据失败：您没有登录', icon: 'none' })
  }
})

onShow(async () => {
  const res = await fetchGeneralDataAPI()

  if (res.data?.code === 1)
    generalDataStore.setGeneralData(res.data.data)
  else
    uni.showToast({ title: res.data?.msg, icon: 'none' })
})

/* -------------------------------- 轮播图 START ------------------------------- */
const current = ref(0)
const swiperImages = computed(() => {
  return generalDataStore.generalData?.nav.map((item) => {
    return withDomain(item.image)
  })
})
/* --------------------------------- 轮播图 END -------------------------------- */

/* -------------------------------- 通知 START -------------------------------- */
const notice = computed(() => {
  return generalDataStore.generalData?.notice
})
/* --------------------------------- 通知 END --------------------------------- */

/* ------------------------------- 最新开班 START ------------------------------- */
const classList = computed(() => {
  return generalDataStore.generalData?.class
})
/* -------------------------------- 最新开班 END -------------------------------- */

/* ------------------------------- 事件处理 START ------------------------------- */
/**
 * @description 点击“扫码签到”时触发
 */
function handleScanQRCode() {
  uni.scanCode({
    onlyFromCamera: true,
    hideAlbum: true,
    success: (res) => {
      uni.navigateTo({
        url: `/${res.path}`,
      })
    },
  })
}

/**
 * @description 点击在线选班“查看更多”时触发
 */
function handleViewClasses() {
  router.push('classes')
}

/**
 * @description 点击“参与班级”时触发
 */
function handleViewMyClasses() {
  router.push('myClasses')
}

/**
 * @description 点击“报名记录”时触发
 */
function handleViewRegistrationRecord() {
  router.push('registrationRecord')
}

/**
 * @description 点击“使用帮助”时触发
 */
function handleViewHelp() {
  router.push('help')
}

/**
 * @description 点击通知时触发
 */
function handleViewNotices() {
  router.push('notices')
}

/**
 * @description 点击班级卡片时触发
 */
function handleTapClassCard(id: string) {
  router.push({
    name: 'classDetail',
    params: { id },
  })
}
/* -------------------------------- 事件处理 END -------------------------------- */
</script>

<template>
  <Spacer height="32" />
  <!-- 轮播图 START -->
  <uv-swiper :list="swiperImages" height="280rpx" radius="24rpx" @change="(e: any) => current = e.current" />
  <!-- 轮播图 END -->
  <Spacer height="28" />
  <!-- 图标网格 START -->
  <view class="mx-28rpx flex items-center justify-between">
    <view class="flex flex-col items-center" @tap="handleScanQRCode">
      <image class="h-112rpx w-112rpx" src="@/static/images/home/grid_scan.png" />
      <Spacer height="11" />
      <view class="text-24rpx text-#0E1632 font-medium leading-32rpx">
        扫码签到
      </view>
    </view>
    <view class="flex flex-col items-center" @tap="handleViewMyClasses">
      <image class="h-112rpx w-112rpx" src="@/static/images/home/grid_class.png" />
      <Spacer height="11" />
      <view class="text-24rpx text-#0E1632 font-medium leading-32rpx">
        参与班级
      </view>
    </view>
    <view class="flex flex-col items-center" @tap="handleViewRegistrationRecord">
      <image class="h-112rpx w-112rpx" src="@/static/images/home/grid_calendar.png" />
      <Spacer height="11" />
      <view class="text-24rpx text-#0E1632 font-medium leading-32rpx">
        报名记录
      </view>
    </view>
    <view class="flex flex-col items-center" @tap="handleViewHelp">
      <image class="h-112rpx w-112rpx" src="@/static/images/home/grid_qa.png" />
      <Spacer height="11" />
      <view class="text-24rpx text-#0E1632 font-medium leading-32rpx">
        使用帮助
      </view>
    </view>
  </view>
  <!-- 图标网格 END -->
  <Spacer height="28" />
  <!-- 通知内容 START -->
  <view class="h-84rpx flex items-center justify-between rounded-20rpx bg-white px-35rpx" @tap="handleViewNotices">
    <view class="flex items-center">
      <view class="text-26rpx font-semibold leading-26rpx">
        <view class="text-#0037AE">
          通知
        </view>
        <view class="text-#0E1632">
          内容
        </view>
      </view>
      <view class="ml-36rpx mr-32rpx h-48rpx w-1rpx bg-#BDBDBD" />
      <view class="max-w-460rpx overflow-hidden text-ellipsis whitespace-nowrap text-nowrap text-24rpx text-#666666">
        {{ notice?.title || '通知获取失败' }}
      </view>
    </view>
    <image class="h-25rpx w-14rpx" src="@/static/images/cheveron-right.png" />
  </view>
  <!-- 通知内容 END -->
  <Spacer height="24" />
  <!-- 最新开班列表标题 START -->
  <view class="flex items-center justify-between py-26rpx">
    <view class="relative">
      <view class="text-32rpx text-#333333 font-semibold leading-32rpx">
        最新开班
      </view>
      <view class="absolute bottom-0 h-10rpx w-full from-#0037AE to-#0037AE from-opacity-10 bg-gradient-to-r" />
    </view>
    <view class="flex items-center text-24rpx text-#666666 leading-24rpx" @tap="handleViewClasses()">
      查看更多
      <Spacer width="12" />
      <image class="h-24rpx w-13rpx" src="@/static/images/cheveron-right.png" />
    </view>
  </view>
  <!-- 最新开班列表标题 END -->
  <!-- 最新开班列表 START -->
  <view class="grid grid-cols-2 gap-20rpx">
    <ClassCard
      v-for="c in classList"
      :key="c.id"
      :picture="withDomain(c.images)!"
      :title="c.title"
      :author="c.place"
      :created-at="c.start_time"
      @tap="handleTapClassCard(c.id.toString())"
    />
  </view>
  <!-- 最新开班列表 END -->
  <Spacer height="48" />
</template>

<route lang="yaml">
name: 'home'
style:
  navigationBarBackgroundColor: '#0037AE'
  navigationBarTitleText: '首页'
  navigationBarTextStyle: 'white'
</route>
